<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES6提供了更接近传统语言的写法，；引入了class(类)这个概念，作为对象模板，通过class关键字可以定义类。

    // 构造函数写法

    // 静态属性和方法   =>   给构造函数自己使用
    // function Cat(name, color) {
    //     this.name = name;
    //     this.color = color;
    // }

    // // 给构造函数 Cat 定义了自己的方法  Cat.isCat   (类似Array.isArray);
    // Cat.msg = "这是构造函数Cat";
    // Cat.isCat = function (args) {
    //     if (args.constructor === Cat) {
    //         return true;
    //     }
    //     return false;
    // }

    // // 动态方法(prototype) =>  给通过该构造函数创建的实例化对象使用
    // Cat.prototype.species = "猫";
    // Cat.prototype.call = function () {
    //     console.log("喵喵");
    // };
    // Cat.prototype.skill = function () {
    //     console.log("抓老鼠");
    // };

    // var Tom = new Cat("Tom", "green");
    // console.log(Tom.color)
    // Tom.call();




    // class写法
    class Cat {  // 所有与构造函数相关的内容 就放到 constructor函数中
        constructor(name, color) {
            this.name = name;
            this.color = color;
        }
        // 通过关键词 static => 定义静态属性和方法
        static msg = "这是构造函数Cat";
        static isCat(args) {
            if (args.constructor === Cat) {
                return true;
            }
            return false;
        }
        // 动态方法(prototype) =>  给通过该构造函数创建的实例化对象使用
        // species = "猫";     在class中直接定义的变量  会作为 实例的属性  绑定到每个实例中
        call() {
            console.log("喵喵");
        }
        skill() {
            console.log("抓老鼠");
        }
    }
    // 在ES6中，如果想要把属性定义到原型对象上，那么等class创建完后 手动赋值给prototype即可
    Cat.prototype.species = "猫";

    console.dir(Cat);
    var Tom = new Cat("Tom", "pink");
    console.log(Tom);
    console.log(Cat.isCat(Tom));
    console.log(Cat.msg);
    Tom.skill()
</script>

</html>